<template>
    <div>
        我是购物车页面
        <p>
            <input type="text" v-checkPhone style="outline:none" v-model='phone'>
        </p>
    </div>
</template>

<script>
// 实现一个自定义指令的案例
// 使用该自定义指令实现一个 表单校验
// 注意: 自定义指令中的函数的this,并不指向当前组件实例

export default {
    data() {
        return {
            phone: ''
        }
    },
    methods: {
        fn() {

        }
    },
    directives: {
        checkPhone(el, binding) {
            console.log(el.value);
            // console.log('this', this); //undefined
            if (/^1[3-9]\d{9}$/.test(el.value)) {
                el.style.border = '2px solid green'
            } else {
                el.style.border = '2px solid red'
            }
        }
    }
}
</script>
<style scoped></style>